<template>
  <view>
    <view class="title-box">
      <view class="nav-box"><u-tabs @change="onChange" @click="catTab" :list="list1" itemStyle="padding-left: 36rpx; padding-right: 36rpx; height: 80rpx;" lineColor="#E52D21"></u-tabs></view>
    </view>
    <block v-if="navIndex===0">
      <block v-if="tasksList.counts != 0">
        <tasksCard  v-for="item in tasksList.items" :key="item.id" :item='item'></tasksCard>
      </block>
      <kongMessage v-else>无待提货任务</kongMessage>
    </block>
    <block v-else-if="navIndex===1">
      <block v-if="tasksList.counts != 0">
        <tasksCard  v-for="item in tasksList.items" :key="item.id" :item='item'></tasksCard>
      </block>
      <kongMessage v-else>无在途任务</kongMessage>
    </block>
    <block v-else-if="navIndex===2">
      <view class="search-box">
        <u-search :clearabled="true" :showAction="false"></u-search>
      </view>
      <view class="select-date">
        <button class="select-btn" @click="startShow = true">开始时间</button>
        <text style="color:#2a2929ff;font-size: 14px;">至</text>
        <button class="select-btn" @click="endShow = true">结束时间</button>
        <button class="select-date-right">筛选</button >
      </view>
      <tasksCard></tasksCard>
      <block v-if="tasksList.counts != 0">
        <tasksCard  v-for="item in tasksList.items" :key="item.id" :item='item'></tasksCard>
      </block>
      <kongMessage v-else>未找到相关任务</kongMessage>
      <u-datetime-picker title="开始时间" ref="datetimePicker" :show="startShow" v-model="value1" mode="date" :formatter="formatter" @close="startShow = false" @cancel="startShow = false"></u-datetime-picker>
      <u-datetime-picker title="结束时间" ref="datetimePicker" :show="endShow" v-model="value2" mode="date" :formatter="formatter" @cancel="endShow = false"></u-datetime-picker>
    </block>
  </view>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      list1: [
        {
          name: '待提货'
        },
        {
          name: '在途'
        },
        {
          name: '已完成'
        }
      ],
      startShow: false,
      endShow: false,
      value1: Number(new Date()),
      value2: Number(new Date()),
      page:1,
      pageSize:10,
      navIndex:0,
      tasksList:{
        // counts:0
      }
    };
  },
  created() {},
  mounted() {},
  onReady() {
    // 微信小程序需要用此写法
    // this.$refs.datetimePicker.setFormatter(this.formatter)
  },
  onLoad() {
    this.getTasksList(1)
  },
  methods: {
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`;
      }
      if (type === 'month') {
        return `${value}月`;
      }
      if (type === 'day') {
        return `${value}日`;
      }
      return value;
    },
    onChange({index}){
     this.navIndex = index
    },
    catTab({index}){
      let status = index +1
      if(status == 3) status = 6
      this.getTasksList(status)
    },
    async getTasksList(status){
      const {data:{data}} = await uni.$http.get('/tasks/list',{
        status,
        page:this.page,
        pageSize:this.pageSize
      })
      console.log(data);
      this.tasksList = data
    }
  }
};
</script>

<style lang="scss">
  page{
    background-color: #f4f4f4;
  } 
  .title-box{
    background-color: #fff;
  }
  .search-box{
    padding: 10px 15px 8px;
    background-color: #fff;
  }
.select-date {
  background-color: #fff;
  display: flex;
  align-items: center;
  height: 60px;
  border: none;
  
  .select-btn {
    &::after{
      border: none;
    }
    display: flex;
    align-items: center;
    justify-content: center;
    width: 106px;
    height: 32px;
    background-color: #f4f4f4;
    border-radius: 32px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #818181;
  }
  .select-date-right{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 32px;
    background: #FADCD9;
    border: none;
    border-radius: 16px;
    font-size: 14px;
    color: #FFFFFF;
    &::after{
      border: none;
    }
  }
}
</style>
